import { useContext, useRef } from 'react';
import { NavBar, List, Input, Toast } from 'antd-mobile';
import { useHistory } from 'react-router-dom';

import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const inputRef = useRef(null);

  const handleAdd = async () => {
    const invitedUserId = inputRef.current.nativeElement.value;
    if (!invitedUserId) {
      return;
    }
    try {
      await mySdkStore.sdk.addFriend({ invitedUserId });
      Toast.show('发送好友申请成功');
      setTimeout(history.goBack(), 1000);
    } catch(e) {
      // @ts-ignore
      Toast.show(e.errorMessage);
    }
  }

  return (<div className="userLabelPage">
    <NavBar
      onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}
      right={<a onClick={handleAdd}>添加</a>}
    >添加好友</NavBar>
    <List style={{ '--border-top': 0, '--border-bottom': 0, marginTop: 12 }}>
      <List.Item>
        <Input ref={inputRef} placeholder="请输入好友ID" />
      </List.Item>
    </List>
  </div>)
}